<!--
 * @Description: 
 * @Author: 客
 * @Date: 2024-11-14 08:52:48
 * @LastEditors: 客
 * @LastEditTime: 2024-11-14 10:14:52
 * 这课真牢啊
-->
<!-- 注册 -->
 <template>
 <div class="main">
    <div  style="font-size: 30px;">注册</div>
            <!-- 表单元素 -->
            <form>
          <table>
            <tr>
              <td class="tdLeft">
                <label for="username">
                  用户名
                </label>
              </td>
              <td class="tdRight">
                <input v-model="newUsername" type="text" name="username" id="username" placeholder="请输入用户名">
              </td>
            </tr>
            <tr>
              <td class="tdLeft">
                <label for="password">
                  密码
                </label>
              </td>
              <td class="tdRight">
                <input v-model="newPassword" type="password" name="password" id="password" placeholder="请输入密码">
              </td>
            </tr>
            <tr>
              <td class="tdLeft">
                <label for="gender">
                  性别
                </label>
              </td>
              <td class="tdRight">
                <input type="radio" name="gender" value="male"> 男
                <input type="radio" name="gender" value="female"> 女
              </td>
            </tr>
            <tr>
              <td class="tdLeft">
                <label for="checkCode">
                  验证码
                </label>
              </td>
              <td class="tdRight">
                <input type="text" name="checkCode" id="checkCode" placeholder="请输入验证码">
              </td>
            </tr>
            <tr>
              <td id="btnSubmit" colspan="2">
                <input id="btnSubmit" type="submit" value="注册" @click="handleRegister">
              </td>
            </tr>
          </table>
        </form>
 </div>
</template>    
  <script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 定义用户名数据变量，双向绑定到输入框
const newUsername = ref('');
// 定义密码数据变量，双向绑定到输入框
const newPassword = ref('');
// 定义性别数据变量，初始值可设为空字符串
const newGender = ref('');
// 定义验证码数据变量，双向绑定到输入框
const newCheckCode = ref('');

// 获取路由实例
const router = useRouter();

// 定义处理注册的方法
const handleRegister = async () => {
    // 这里可以添加实际的注册逻辑，比如发送AJAX请求到服务器端进行注册操作
    // 为了演示简单，这里假设注册成功，直接给出提示

    // 使用浏览器的原生alert弹出框提示注册成功
    alert('注册成功');

    // 跳转到登录页面，假设路由配置中登录页面的路径是 '/login'
    await router.push('./views/Login');
}

  </script>
  <style scoped>
   .main{
    width: 300px;
    height: 200px;
    background-color: pink;
    border: 1px solid #000;
    margin: 100px auto;
    text-align: center;
   }
   
  </style>
  
   